<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>发送axios请求</h1>
    <button class="btn1">发送axios里get形式的请求</button>
    <button class="btn2">发送axios里post形式的请求</button>
    <script>
        // axios 会对外暴露一个 axios对象
        console.dir(axios);
        // 引入axios
        document.querySelector(".btn1").onclick = async function () {
            // axios({
            //     url:"/getdata",
            //     method:"get", // 请求方法默认是get方式
            //     params:{    // 地址栏带参数 ，请求体带参数 是 data
            //         x:1,
            //         y:2
            //     }
            // }).then(res=>{
            //     // console.log(res);
            //     let {data} = res;
            //     console.log(data);
            // })


            let { data } = await axios({
                url: "/getdata",
                method: "get", // 请求方法默认是get方式
                params: {    // 地址栏带参数 ，请求体带参数 是 data
                    x: 1,
                    y: 2
                }
            })
            console.log(data);


        }

        // function fn() {
        //     console.log("fn");
        // }

        // fn();
        // mixin  混入模式
        // fn.hello = "你好";
        // console.dir(fn);

        document.querySelector(".btn2").onclick = function () {
            axios ({
                url: "/getpostdata",
                method: "post", // 请求方法默认是get方式
                // data: {   // post数据 ，携带数据需要写在data 里 ，头部axios会根据数据类型自动设置 1.给的是 对象 ，那么axios默认设置 头部为json 2.querystring参数 axios会自动设置成 表单的头部
                //     x: 3,
                //     y: 4
                // }
                data:"x=1&y=2"
            }).then((res)=> {
                console.log(res);
                let { data } = res;
                console.log(data);
            })
        }

    </script>
</body>

</html>